<template>
  <view class="approve">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="form">
        <view class="form-item-title">
          <view class="title">
            <view class="text">企业资料</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 公司名称 </view>
            <input class="input" v-model="form.enterpriseName" type="text" placeholder="请填写" />
          </view>
          <view class="line" />
        </view>
        <view class="form-item">
          <view class="item">
            <view class="label"> 信用代码 </view>
            <input class="input" type="text" v-model="form.creditCode" placeholder="请输入企业统一社会信用代码" />
          </view>
          <view class="line" />
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 注册地址 </view>
            <input v-model="form.address" class="input" type="text" placeholder="请填写企业详细通讯录地址" />
          </view>
          <view class="line" />
        </view>

        <view class="form-item">
          <view class="item">
            <view class="label"> 电话号码 </view>
            <input v-model="form.contactPhone" class="input" type="text" placeholder="请输入企业联系电话号码" maxlength="11" />
          </view>
          <view class="line" />
        </view>
      </view>

      <view class="form-1">
        <view class="form-item-title">
          <view class="title">
            <view class="text">营业执照</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <view class="form-item-logo">
          <view class="item">
            <view class="label"> 公司logo </view>
            <view class="support"> 支持上传jpg/png </view>

            <view class="file">
              <upload-img :customCss="true" @change="uploadImgFn($event, 0)" :limit="1" title="支持上传jpg/png"
                :value="fileList">
                <image class="image" src="@/static/images/approve/yyzz.png" mode="aspectFit|aspectFill|widthFix"
                  lazy-load="false" binderror="" bindload="" />
              </upload-img>
            </view>
          </view>
        </view>
      </view>

      <view class="form-2">
        <view class="form-item-title">
          <view class="title">
            <view class="text">法人证件</view>
            <view class="borderB"> </view>
          </view>
        </view>

        <!-- 身份证上传 -->
        <view class="form-item-logo">
          <view class="item">
            <view class="label"> 身份证件上传 </view>
            <!-- <view class="support"> 支持上传jpg/png </view> -->

            <view class="file">
              <view class="fileList">
                <view class="rx">
                  <upload-img :customCss="true" :value="fileListRx" :limit="1" @change="uploadImgFn($event, 1)">
                    <image class="" src="@/static/images/approve/rx.png" mode="aspectFit|aspectFill|widthFix"
                      lazy-load="false" binderror="" bindload="" />
                  </upload-img>

                  <text class="text"> 人像面 </text>
                </view>

                <view class="gh">
                  <upload-img :limit="1" :customCss="true" :value="fileListGh" @change="uploadImgFn($event, 2)">
                    <image class="" src="@/static/images/approve/gh.png" mode="aspectFit|aspectFill|widthFix"
                      lazy-load="false" binderror="" bindload="" />
                  </upload-img>

                  <text class="text"> 国徽面 </text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="attention-text"> 注意事项 </view> -->
      <!-- ellipsis1 -->
      <!-- <view class="attention">
        1. 适用企业、个体工商户、政府、事业单位、学校、组织等， <br />
        账号归属企业；<br />
        2. 认证账号可开企业增值税专用发票； <br />
        3. 一个企业信息主体默认可认证 3个账号； <br />
        4. 所有上传信息均会被妥善保管，不会用于其他商业用途或传输给其他第三方；
      </view> -->

      <view class="submit" @click="submit" v-if="form.isApprove !== '1'"> 提交 </view>

      <!-- 占位 -->
      <view style="height: 100rpx" />
    </scroll-view>
  </view>
</template>

<script>
import navbar from "./components/navbar.vue";
import uploadImg from "@/components/uploadImg/uploadImg";
import { postAuthEnterprise, getAuthDetailsAPI } from "@/api/subPage/mine";
import { getParam } from "@/api/common"
import { verifyMobile } from '@/utils/toast'

export default {
  components: { navbar, uploadImg },
  data() {
    return {
      styleData: {
        // background: "#232323",
        tabbarText: "企业认证",
        // color: "#ffffff",
        show: true,
      },
      showSubmit: true,

      // 上传
      fileList: [],
      fileListRx: [],
      fileListGh: [],

      form: {
        enterpriseName: "", //企业名称
        creditCode: "", // 信用代码
        address: "", // 注册地址
        contactPhone: "", // 联系电话
        url: "", //营业执照
        certificateUrl: "", // 人像
        certificateContraryUrl: "", // 国徽
      },
      status: ''
    };
  },
  computed: {},
  mounted() {
    this.getList();
    getParam().then((res) => {
      this.status = res.data
    })
  },
  // 监控data中的数据变化
  watch: {},
  onLoad(options) { },
  onShow() { },
  onReady() { },
  methods: {
    // 定义一个通用的上传图片函数
    uploadImg(data, index) {
      switch (index) {
        case 0:
          this.form.url = data[0]?.url;
          break;
        case 1:
          this.form.certificateUrl = data[0]?.url;
          break;
        case 2:
          this.form.certificateContraryUrl = data[0]?.url;
          break;

        default:
          break;
      }
      console.log(this.form, "表单数据");
    },

    // 上传图片监听
    uploadImgFn(data, index) {
      this.uploadImg(data, index);
    },

    async getList() {
      const { data, code } = await getAuthDetailsAPI();

      if (code === 200) {
        if (Object.keys(data).length > 0) {
          this.form = data;
          this.fileList.push(data.url);

          this.fileListRx.push(data.certificateUrl);
          this.fileListGh.push(data.certificateContraryUrl);
        }
      }
    },

    // 表单提交
    async submit() {
      let timer = null;
      clearTimeout(timer);
      if (verifyMobile(this.form.contactPhone)) {
        const res = await postAuthEnterprise(this.form);
        console.log(res, "res");

        if (res.code === 200) {
          uni.showToast({
            title: "保存成功",
            icon: "success",
            duration: 2000,
          });
          timer = setTimeout(() => {
            uni.navigateBack();
          }, 1500);
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.approve {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-content: center;
  background-color: #f9f9f9;
  overflow: hidden;

  .scroll {
    position: relative;
    width: 700rpx;
    height: 100%;
    overflow: hidden;
    margin: 0 24rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    .form {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }
    }

    .form-1 {
      margin-top: 24rpx;
      width: 100%;
      padding-bottom: 33rpx;
      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;
          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }

      .form-item-logo {
        position: relative;

        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;

          margin-left: 24rpx;
          margin-right: 24rpx;

          height: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;

            margin-right: 40rpx;
          }

          .support {
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }

          .file {
            margin-top: 26rpx;
            width: 654rpx;
            height: 406rpx;

            ::v-deep .file-picker__box {
              width: 654rpx !important;
              height: 406rpx !important;
            }

            .image {
              width: 654rpx;
              height: 406rpx;
            }
          }
        }
      }
    }

    .form-2 {
      margin-top: 24rpx;
      width: 100%;

      border-radius: 16rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;

      .form-item-title {
        width: 100%;
        margin-top: 28rpx;

        .title {
          position: relative;
          width: 128rpx;
          height: 45rpx;
          font-weight: 500;
          font-size: 32rpx;
          color: #000000e0;
          margin-left: 24rpx;
          margin-bottom: 24rpx;

          .text {
            z-index: 99;
            position: absolute;
          }

          .borderB {
            position: absolute;
            bottom: 4rpx;
            width: 50%;
            height: 14rpx;
            background-color: #ff9e24;
            z-index: 10;
            border-radius: 10rpx;
          }
        }
      }

      .form-item {
        position: relative;
        height: 98rpx;
        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          align-items: center;
          margin-left: 24rpx;
          margin-right: 24rpx;

          width: 100%;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;
            opacity: 0.45;
            margin-right: 40rpx;
          }

          .desc {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
          }

          .arrows {
            position: absolute;
            bottom: 45rpx;
            right: 24rpx;
            width: 26rpx;
            height: 26rpx;

            image {
              width: 100%;
              height: 100%;
            }
          }
        }

        .line {
          height: 2rpx;
          background-color: #f2f2f2;
          margin: 0 24rpx;
        }
      }

      .form-item-logo {
        position: relative;

        width: 702rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;

          margin-left: 24rpx;
          margin-right: 24rpx;

          .label {
            font-weight: 500;
            font-size: 28rpx;
            color: #000000;

            margin-right: 40rpx;
          }

          .support {
            font-weight: 500;
            font-size: 22rpx;
            color: #00000073;
            letter-spacing: 0;
          }

          .file {
            margin-top: 26rpx;
            width: 654rpx;
            height: 280rpx;
            padding-bottom: 12rpx;

            .image {
              width: 654rpx;
              height: 260rpx;
            }

            .fileList {
              display: flex;
              justify-content: space-between;

              .rx {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 322rpx;
                height: 260rpx;

                ::v-deep .file-picker__box {
                  width: 322rpx !important;
                  height: 260rpx !important;
                }

                image {
                  width: 322rpx;
                  height: 240rpx;
                }

                .text {
                  margin-top: 16rpx;
                  font-family: PingFangSC-Medium;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #00000073;
                  letter-spacing: 0;
                }
              }

              .gh {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 322rpx;
                height: 260rpx;

                ::v-deep .file-picker__box {
                  width: 322rpx !important;
                  height: 260rpx !important;
                }

                image {
                  width: 322rpx;
                  height: 240rpx;
                }

                .text {
                  margin-top: 16rpx;
                  font-family: PingFangSC-Medium;
                  font-weight: 500;
                  font-size: 24rpx;
                  color: #00000073;
                  letter-spacing: 0;
                }
              }
            }
          }
        }
      }
    }

    .attention-text {
      display: flex;
      width: 112rpx;
      height: 40rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 28rpx;
      color: #000000e0;
      letter-spacing: 0;
      margin-top: 56rpx;
    }

    .attention {
      width: 702rpx;
      height: 240rpx;
      font-family: PingFang-SC-Bold;
      font-weight: 700;
      font-size: 24rpx;
      color: #00000073;
      letter-spacing: 0;
      line-height: 40rpx;
    }

    .submit {
      margin: 0 auto;
      width: 420rpx;
      margin-top: 80rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      line-height: 88rpx;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
